<!DOCTYPE html>
<html lang="en" class="app">

	<head>
		<meta charset="utf-8" />
		<title>网易云音乐</title>
		<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
		<link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
		<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="css/animate.css" type="text/css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
		<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
		<link rel="stylesheet" href="css/font.css" type="text/css" />
		<link rel="stylesheet" href="css/app.css" type="text/css" />
		<!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
	</head>

	<body class="">
		<section class="vbox">
			<header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
				<div class="navbar-header aside bg-info nav-xs">
					<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
						<i class="icon-list"></i>
					</a>
					<a href="index.html" class="navbar-brand text-lt">
						<i class="icon-earphones"></i>
						<img src="images/logo.png" alt="." class="hide">
						<span class="hidden-nav-xs m-l-sm">网易云音乐</span>
					</a>
					<a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
						<i class="icon-settings"></i>
					</a>
				</div>
				<ul class="nav navbar-nav hidden-xs">
					<li>
						<a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
							<i class="fa fa-indent text"></i>
							<i class="fa fa-dedent text-active"></i>
						</a>
					</li>
				</ul>
				<form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
					<div class="form-group">
						<div class="input-group">
							<span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
							<input type="text" class="form-control input-sm no-border rounded" placeholder="搜索音乐、歌曲 . . .">
						</div>
					</div>
				</form>
				<div class="navbar-right ">
					<ul class="nav navbar-nav m-n hidden-xs nav-user user">
						<li class="hidden-xs">
							<a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
								<i class="icon-bell"></i>
								<span class="badge badge-sm up bg-danger count">2</span>
							</a>
							<section class="dropdown-menu aside-xl animated fadeInUp">
								<section class="panel bg-white">
									<div class="panel-heading b-light bg-light">
										<strong>有<span class="count">2</span> 条未读信息，请注意查看</strong>
									</div>
									<div class="list-group list-group-alt">
										<a href="#" class="media list-group-item">
											<span class="pull-left thumb-sm">
                      <img src="images/a0.png" alt="..." class="img-circle">
                    </span>
											<span class="media-body block m-b-none">
                      端坐瘦马<br>
                      <small class="text-muted">你有什么推荐的音乐吗？</small>
                    </span>
										</a>
										<a href="#" class="media list-group-item">
											<span class="media-body block m-b-none">
                      易听小秘书贴心为你服务<br>
                      <small class="text-muted">你的会员即将到期，请注意冲值</small>
                    </span>
										</a>
									</div>
									<div class="panel-footer text-sm">
										<a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
										<a href="#notes" data-toggle="class:show animated fadeInRight">查看所有通知</a>
									</div>
								</section>
							</section>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
								<span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="images/a0.png" alt="...">
              </span> 没事就爱瞎晃悠 <b class="caret"></b>
							</a>
							<ul class="dropdown-menu animated fadeInRight">
								<li>
									<span class="arrow top"></span>
									<a href="#">设置</a>
								</li>
								<li>
									<a href="profile.html">个人中心</a>
								</li>
								<li>
									<a href="#">
										<span class="badge bg-danger pull-right">3</span>通知</a>
								</li>
								<li>
									<a href="docs.html">帮助</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="modal.lockme.html" data-toggle="ajaxModal">注销</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</header>
			<section>
				<section class="hbox stretch">
					<!-- .aside -->
					<aside class="bg-black dk nav-xs aside hidden-print" id="nav">
						<section class="vbox">
							<section class="w-f-md scrollable">
								<div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">

									<!-- nav -->
									<nav class="nav-primary hidden-xs">
										<ul class="nav bg clearfix">
											<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
												发现
											</li>
											<li>
												<a href="index.html">
													<i class="icon-disc icon text-success"></i>
													<span class="font-bold">首页</span>
												</a>
											</li>
											<li>
												<a href="genres.html">
													<i class="icon-music-tone-alt icon text-info"></i>
													<span class="font-bold">类型</span>
												</a>
											</li>
											<li>
												<a href="events.html">
													<i class="icon-drawer icon text-primary-lter"></i>
													<b class="badge bg-primary pull-right">6</b>
													<span class="font-bold">主播电台</span>
												</a>
											</li>
											<li>
												<a href="listen.html">
													<i class="icon-list icon  text-info-dker"></i>
													<span class="font-bold">歌单</span>
												</a>
											</li>
											<li>
												<a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
													<i class="icon-social-youtube icon  text-primary"></i>
													<span class="font-bold">视频</span>
												</a>
											</li>
											<li class="m-b hidden-nav-xs"></li>
										</ul>
										<ul class="nav" data-ride="collapse">
											<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
												列表
											</li>
											<li>
												<a href="#" class="auto">
													<span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
													<i class="icon-screen-desktop icon">
                        </i>
													<span>布局</span>
												</a>
												<ul class="nav dk text-sm">
													<li>
														<a href="layout-color.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>移动端</span>
														</a>
													</li>
													<li>
														<a href="layout-boxed.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>盒装布局</span>
														</a>
													</li>
													<li>
														<a href="layout-fluid.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>流体布局</span>
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="#" class="auto">
													<span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
													<i class="icon-chemistry icon">
                        </i>
													<span>聊天和定时</span>
												</a>
												<ul class="nav dk text-sm">

					<li>
                          <a href="widgets.html" class="auto">                            
                            <b class="badge bg-dark pull-right">8</b>                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>聊天</span>
                          </a>
                        </li>
                        
                        <li >
                          <a href="timeline.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>定时</span>
                          </a>
                        </li>
												</ul>
											</li>
											<li>
												<a href="#" class="auto">
													<span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
													<i class="icon-grid icon">
                        </i>
													<span>个人中心</span>
												</a>
												<ul class="nav dk text-sm">
													<li>
														<a href="profile.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>简况</span>
														</a>
													</li>
													<li>
														<a href="blog.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>博客</span>
														</a>
													</li>

													<li>
														<a href="signin.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>登录</span>
														</a>
													</li>
													<li>
														<a href="signup.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>注册</span>
														</a>
													</li>
													<li>
														<a href="404.html" class="auto">
															<i class="fa fa-angle-right text-xs"></i>

															<span>刷新页面</span>
														</a>
													</li>
												</ul>
											</li>
										</ul>
										<ul class="nav text-sm">
											<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
												<span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span> 播放列表
											</li>
											<li>
												<a href="track-detail.html">
													<i class="icon-music-tone icon"></i>
													<b class="badge bg-success dker pull-right">90</b>
													<span>嘻哈</span>
												</a>
											</li>
											<li>
												<a href="jueshi.html">
													<i class="icon-playlist icon "></i>
													<b class="badge bg-success dker pull-right"></b>
													<span>爵士</span>
												</a>
											</li>
											<li>
												<a href="track-detail.html">
													<i class="icon-globe-alt icon "></i>
													<b class="badge bg-success dker pull-right"></b>
													<span>流行</span>
												</a>
											</li>
											<li>
												<a href="track-detail.html">
													<i class="icon-cup icon "></i>
													<b class="badge bg-success dker pull-right"></b>
													<span>民谣</span>
												</a>
											</li>
											<li>
												<a href="track-detail.html">
													<i class="icon-diamond icon text-success-lter"></i>
													<b class="badge bg-success dker pull-right"></b>
													<span>情歌</span>
												</a>
											</li>

										</ul>
									</nav>
									<!-- / nav -->
								</div>
							</section>

							<footer class="footer hidden-xs no-padder text-center-nav-xs">
								<div class="bg hidden-xs ">
									<div class="dropdown dropup wrapper-sm clearfix">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<span class="thumb-sm avatar pull-left m-l-xs">                        
                        <img src="images/a3.png" class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
											<span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">没事就爱瞎晃悠</strong> 
                          <b class="caret"></b>
                        </span>
											<span class="text-muted text-xs block m-l">艺术总监</span>
											</span>
										</a>
										<ul class="dropdown-menu animated fadeInRight aside text-left">
											<li>
												<span class="arrow bottom hidden-nav-xs"></span>
												<a href="#">设置</a>
											</li>
											<li>
												<a href="profile.html">个人中心</a>
											</li>
											<li>
												<a href="#">
													<span class="badge bg-danger pull-right">3</span> 通知
												</a>
											</li>
											<li>
												<a href="docs.html">帮助</a>
											</li>
											<li class="divider"></li>
											<li>
												<a href="modal.lockme.html" data-toggle="ajaxModal">注销</a>
											</li>
										</ul>
									</div>
								</div>
							</footer>
						</section>
					</aside>
					<!-- /.aside -->
					<section id="content">
						<section class="hbox stretch">
							<section>
								<section class="vbox">
									<section class="scrollable padder-lg w-f-md" id="bjax-target">
										<a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin"><i class="icon-refresh i-lg  inline" id="refresh"></i></a>
										<h2 class="font-thin m-b">发现 <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>
                  
                  
                 <section class="panel panel-default">
                    <div class="carousel slide auto panel-body" id="c-slide">
                        <ol class="carousel-indicators out">
                          <li data-target="#c-slide" data-slide-to="0" class="active"></li>
                          <li data-target="#c-slide" data-slide-to="1" class=""></li>
                          <li data-target="#c-slide" data-slide-to="2" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                          <div class="item active">
                            <p class="text-center">
                              <img src="images/l1.png" alt="" />
                            </p>
                          </div>
                          <div class="item">
                            <p class="text-center">
                             <img src="images/l2.png" alt="" />
                            </p>
                          </div>
                          <div class="item">
                            <p class="text-center">
                              <img src="images/l3.png" alt="" />
                            </p>
                          </div>
                        </div>
                        <a class="left carousel-control" href="#c-slide" data-slide="prev">
                          <i class="fa fa-angle-left"></i>
                        </a>
                        <a class="right carousel-control" href="#c-slide" data-slide="next">
                          <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
                 </section>
										<div class="row row-sm">
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="bottom">
															<span class="badge bg-info m-l-sm m-b-sm">03:20</span>
														</div>
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p1.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">奇妙能力歌</a>
														<a href="#" class="text-ellipsis text-xs text-muted">陈 粒</a>
													</div>
												</div>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black active">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#" data-toggle="class">
																	<i class="icon-control-play i-2x text"></i>
																	<i class="icon-control-pause i-2x text-active"></i>
																</a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right active" data-toggle="class">
																	<i class="fa fa-heart-o text"></i>
																	<i class="fa fa-heart text-active text-danger"></i>
																</a>
																<a href="#" data-toggle="class">
																	<i class="fa fa-plus-circle text"></i>
																	<i class="fa fa-check-circle text-active text-info"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p2.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">雾霾</a>
														<a href="#" class="text-ellipsis text-xs text-muted">苍 穹 之 下</a>
													</div>
												</div>
											</div>
											<div class="clearfix visible-xs"></div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p3.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">最后的时光</a>
														<a href="#" class="text-ellipsis text-xs text-muted">Allen JH</a>
													</div>
												</div>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<div class="top">
															<span class="pull-right m-t-n-xs m-r-sm text-white">
                              <i class="fa fa-bookmark i-lg"></i>
                            </span>
														</div>
														<a href="#"><img src="images/p4.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">春天里</a>
														<a href="#" class="text-ellipsis text-xs text-muted">汪 峰</a>
													</div>
												</div>
											</div>
											<div class="clearfix visible-xs"></div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p5.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">南方姑娘</a>
														<a href="#" class="text-ellipsis text-xs text-muted">赵 雷</a>
													</div>
												</div>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="top">
															<span class="pull-right m-t-sm m-r-sm badge bg-info">6</span>
														</div>
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p6.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">青藏高原</a>
														<a href="#" class="text-ellipsis text-xs text-muted">韩 红</a>
													</div>
												</div>
											</div>
											<div class="clearfix visible-xs"></div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<div class="top">
															<span class="pull-right m-t-sm m-r-sm badge bg-white">12</span>
														</div>
														<a href="#"><img src="images/p7.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">月朗星稀情话醉人</a>
														<a href="#" class="text-ellipsis text-xs text-muted">每日推荐</a>
													</div>
												</div>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p8.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">孤独旅人的民谣</a>
														<a href="#" class="text-ellipsis text-xs text-muted">音乐人：矜持</a>
													</div>
												</div>
											</div>
											<div class="clearfix visible-xs"></div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p9.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">我爱你，这就是我的劫难</a>
														<a href="#" class="text-ellipsis text-xs text-muted">程一电台</a>
													</div>
												</div>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay r r-2x bg-light dker active">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#" data-toggle="class" class="active">
																	<i class="icon-control-play i-2x text"></i>
																	<i class="icon-control-pause i-2x text-active"></i>
																</a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right" data-toggle="class">
																	<i class="fa fa-heart-o text"></i>
																	<i class="fa fa-heart text-active text-danger"></i>
																</a>
																<a href="#" class="active" data-toggle="class">
																	<i class="fa fa-plus-circle text"></i>
																	<i class="fa fa-check-circle text-active text-info"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p10.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">【国人纯音赏】聆听国人华章</a>
														<a href="#" class="text-ellipsis text-xs text-muted">我是一个比较低调的人</a>
													</div>
												</div>
											</div>
											<div class="clearfix visible-xs"></div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p11.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">欧美清新电子 - 让人无法抗拒的的美妙旋律</a>
														<a href="#" class="text-ellipsis text-xs text-muted">Jack Jason</a>
													</div>
												</div>
											</div>
											<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
												<div class="item">
													<div class="pos-rlt">
														<div class="item-overlay opacity r r-2x bg-black">
															<div class="text-info padder m-t-sm text-sm">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star-o text-muted"></i>
															</div>
															<div class="center text-center m-t-n">
																<a href="#"><i class="icon-control-play i-2x"></i></a>
															</div>
															<div class="bottom padder m-b-sm">
																<a href="#" class="pull-right">
																	<i class="fa fa-heart-o"></i>
																</a>
																<a href="#">
																	<i class="fa fa-plus-circle"></i>
																</a>
															</div>
														</div>
														<a href="#"><img src="images/p12.jpg" alt="" class="r r-2x img-full"></a>
													</div>
													<div class="padder-v">
														<a href="#" class="text-ellipsis">欢乐好声音</a>
														<a href="#" class="text-ellipsis text-xs text-muted">致每一位有音乐梦想的朋友</a>
													</div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-7">
												<h3 class="font-thin">最新单曲</h3>
												<div class="row row-sm">
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a2.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">认真的老去</a>
																<a href="#" class="text-ellipsis text-xs text-muted">张希/曹方</a>
															</div>
														</div>
													</div>
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a3.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">꼭 꼭 잡아</a>
																<a href="#" class="text-ellipsis text-xs text-muted">ASTRO</a>
															</div>
														</div>
													</div>
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a8.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">睡觉之歌【小番外】</a>
																<a href="#" class="text-ellipsis text-xs text-muted">苏探</a>
															</div>
														</div>
													</div>
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a9.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">近在千里</a>
																<a href="#" class="text-ellipsis text-xs text-muted">周博豪</a>
															</div>
														</div>
													</div>
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a1.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">不负时光</a>
																<a href="#" class="text-ellipsis text-xs text-muted">云之泣/灰老板</a>
															</div>
														</div>
													</div>
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a6.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">Panda Style</a>
																<a href="#" class="text-ellipsis text-xs text-muted">Lionie</a>
															</div>
														</div>
													</div>
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a7.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">建筑师的梦想</a>
																<a href="#" class="text-ellipsis text-xs text-muted">金文志</a>
															</div>
														</div>
													</div>
													<div class="col-xs-6 col-sm-3">
														<div class="item">
															<div class="pos-rlt">
																<div class="item-overlay opacity r r-2x bg-black">
																	<div class="center text-center m-t-n">
																		<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
																	</div>
																</div>
																<a href="#"><img src="images/a5.png" alt="" class="r r-2x img-full"></a>
															</div>
															<div class="padder-v">
																<a href="#" class="text-ellipsis">电影《机器人男友》主题曲</a>
																<a href="#" class="text-ellipsis text-xs text-muted">王嘉诚</a>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="col-md-5">
												<h3 class="font-thin">热门歌曲</h3>
												<div class="list-group bg-white list-group-lg no-bg auto">
													<a href="#" class="list-group-item clearfix">
														<span class="pull-right h2 text-muted m-l">1</span>
														<span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a4.png" alt="...">
                          </span>
														<span class="clear">
                            <span>电影《驴得水》主题曲</span>
														<small class="text-muted clear text-ellipsis">括号君</small>
														</span>
													</a>
													<a href="#" class="list-group-item clearfix">
														<span class="pull-right h2 text-muted m-l">2</span>
														<span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a5.png" alt="...">
                          </span>
														<span class="clear">
                            <span>还不是因为你长得不好看</span>
														<small class="text-muted clear text-ellipsis">满汉全席</small>
														</span>
													</a>
													<a href="#" class="list-group-item clearfix">
														<span class="pull-right h2 text-muted m-l">3</span>
														<span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a6.png" alt="...">
                          </span>
														<span class="clear">
                            <span>奇妙能力歌</span>
														<small class="text-muted clear text-ellipsis">陈粒</small>
														</span>
													</a>
													<a href="#" class="list-group-item clearfix">
														<span class="pull-right h2 text-muted m-l">4</span>
														<span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a7.png" alt="...">
                          </span>
														<span class="clear">
                            <span>反复听着歌的时候梧桐叶子死去</span>
														<small class="text-muted clear text-ellipsis">豆子糖</small>
														</span>
													</a>
													<a href="#" class="list-group-item clearfix">
														<span class="pull-right h2 text-muted m-l">5</span>
														<span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a8.png" alt="...">
                          </span>
														<span class="clear">
                            <span>繁华《三生三世十里桃花》电视主题曲</span>
														<small class="text-muted clear text-ellipsis">王若伊</small>
														</span>
													</a>
												</div>
											</div>
										</div>
										<div class="row m-t-lg m-b-lg">
											<div class="col-sm-6">
												<div class="bg-primary wrapper-md r">
													<a href="#">
														<span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg"></i> 登录或创建一个账户</span>
														<span class="text-muted">保存和共享您的播放列表与您的朋友，当您登录或创建一个帐户.</span>
													</a>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="bg-black wrapper-md r">
													<a href="#">
														<span class="h4 m-b-xs block"><i class="icon-cloud-download i-lg"></i> 下载手机APP</span>
														<span class="text-muted">获取桌面和移动应用程序开始随时随地听音乐。 </span>
													</a>
												</div>
											</div>
										</div>
									</section>
									<footer class="footer bg-dark">
										<div id="jp_container_N">
											<div class="jp-type-playlist">
												<div id="jplayer_N" class="jp-jplayer hide"></div>
												<div class="jp-gui">
													<div class="jp-video-play hide">
														<a class="jp-video-play-icon">play</a>
													</div>
													<div class="jp-interface">
														<div class="jp-controls">
															<div>
																<a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a>
															</div>
															<div>
																<a class="jp-play"><i class="icon-control-play i-2x"></i></a>
																<a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
															</div>
															<div>
																<a class="jp-next"><i class="icon-control-forward i-lg"></i></a>
															</div>
															<div class="hide">
																<a class="jp-stop"><i class="fa fa-stop"></i></a>
															</div>
															<div>
																<a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a>
															</div>
															<div class="jp-progress hidden-xs">
																<div class="jp-seek-bar dk">
																	<div class="jp-play-bar bg-info">
																	</div>
																	<div class="jp-title text-lt">
																		<ul>
																			<li></li>
																		</ul>
																	</div>
																</div>
															</div>
															<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
															<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
															<div class="hidden-xs hidden-sm">
																<a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
																<a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
															</div>
															<div class="hidden-xs hidden-sm jp-volume">
																<div class="jp-volume-bar dk">
																	<div class="jp-volume-bar-value lter"></div>
																</div>
															</div>
															<div>
																<a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
																<a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
															</div>
															<div>
																<a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
																<a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
															</div>
															<div class="hide">
																<a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
																<a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
															</div>
														</div>
													</div>
												</div>
												<div class="jp-playlist dropup" id="playlist">
													<ul class="dropdown-menu aside-xl dker">
														<!-- The method Playlist.displayPlaylist() uses this unordered list -->
														<li class="list-group-item"></li>
													</ul>
												</div>
												<div class="jp-no-solution hide">
													<span>需要更新</span> 要使用音乐播放器，您将需要更新您的浏览器到最近的版本或更新您的客户端
													<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash 插件</a>.
												</div>
											</div>
										</div>
									</footer>
								</section>
							</section>
							<!-- side content -->
							<aside class="aside-md bg-light dk" id="sidebar">
								<section class="vbox animated fadeInRight">
									<section class="w-f-md scrollable hover">
										<h4 class="font-thin m-l-md m-t">好友列表</h4>
										<ul class="list-group no-bg no-borders auto m-t-n-xxs">
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a1.png" alt="..." class="img-circle">
                        <i class="on b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">陈赛</a>
													</div>
													<small class="text-muted">这首歌太好听了</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a2.png" alt="...">
                        <i class="on b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">王超</a>
													</div>
													<small class="text-muted">楼上的那个逗比</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a3.png" alt="...">
                        <i class="busy b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">蒲波</a>
													</div>
													<small class="text-muted">我爱楼上的那个帅小伙</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a4.png" alt="...">
                        <i class="away b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">自饮自画</a>
													</div>
													<small class="text-muted">【高考闭关中】 . . . .</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a5.png" alt="..." class="img-circle">
                        <i class="on b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">大唐荣耀</a>
													</div>
													<small class="text-muted">几时归去，做个闲人</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a6.png" alt="...">
                        <i class="on b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">李白</a>
													</div>
													<small class="text-muted">蜀道难，难于上青天</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a7.png" alt="...">
                        <i class="busy b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">白居易</a>
													</div>
													<small class="text-muted">白堤上面的那个姑娘还好吗？</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a8.png" alt="...">
                        <i class="away b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">张杰</a>
													</div>
													<small class="text-muted">我是来自星星的那个帅小伙</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a9.png" alt="..." class="img-circle">
                        <i class="on b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">林俊杰</a>
													</div>
													<small class="text-muted">都说我的声音很好听</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a1.png" alt="...">
                        <i class="on b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">隐身在线</a>
													</div>
													<small class="text-muted">看不到我，看不到我。</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a2.png" alt="...">
                        <i class="busy b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">我是一个帅小伙</a>
													</div>
													<small class="text-muted">嗨！路上的那个人</small>
												</div>
											</li>
											<li class="list-group-item">
												<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                        <img src="images/a3.png" alt="...">
                        <i class="away b-light right sm"></i>
                      </span>
												<div class="clear">
													<div>
														<a href="#">静静的田野</a>
													</div>
													<small class="text-muted">啊，撒拉嘿</small>
												</div>
											</li>
										</ul>
									</section>
									<footer class="footer footer-md bg-black">
										<form class="" role="search">
											<div class="form-group clearfix m-b-none">
												<div class="input-group m-t m-b">
													<span class="input-group-btn">
                          <button type="submit" class="btn btn-sm bg-empty text-muted btn-icon"><i class="fa fa-search"></i></button>
                        </span>
													<input type="text" class="form-control input-sm text-white bg-empty b-b b-dark no-border" placeholder="搜索你喜欢的音乐、歌手 . . ">
												</div>
											</div>
										</form>
									</footer>
								</section>
							</aside>
							<!-- / side content -->
						</section>
						<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
					</section>
				</section>
			</section>
		</section>
		<script src="js/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.js"></script>
		<!-- App -->
		<script src="js/app.js"></script>
		<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
		<script src="js/app.plugin.js"></script>
		<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
		<script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
		<script type="text/javascript" src="js/jPlayer/demo.js"></script>

	</body>

</html>